<template>
<div class="box">
  <div class="header head-font">游客画像</div>

  <ul class="content-box">
    <li>
      <h3 class="title tit-font">年龄性别占比</h3>
      <div class="chart-box" >
        <div class="chart-child1" id="myChart1-1"></div>
        <div class="chart-child2" id="myChart1-2"></div>
      </div>
    </li>
    <li>
      <div class="title tit-font"><h3>客源地分析</h3>
        <div class="right-box">
          <span v-for="(item, index) in tabList" :key="index" :class="{active:isActive==index}" @click="doClick(index)">
            <i>{{item}}</i>
          </span>
        </div>
      </div>
      <div class="chart-box" id="myChart2"></div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'History',
  data () {
    return {
      isActive: 0,
      tabList: ['国内', '省内'],
      data1: [
        { name: '18岁以下', value: 7 },
        { name: '18-24', value: 25 },
        { name: '25-39', value: 21 },
        { name: '40-59', value: 18 },
        { name: '60以上', value: 14 }
      ],
      data2: ['重庆', '宁夏', '温州', '海南', '山东', '河北', '上海', '北京', '山西', '河南'],
      data3: [5984, 6543, 7542, 8463, 9846, 10546, 12654, 14682, 16542, 18462]
    }
  },
  mounted () {
    this.drawLine1()
    this.drawLine2()
    this.drawLine3()
  },
  methods: {
    drawLine1 () {
      var data = this.data1
      var color = {
        start: ['#2EA6FF', '#9A4CFB', '#FF6488', '#00E4FF', '#53FCB3'],
        end: ['#fff', '#fff', '#fff', '#fff', '#fff']
      }
      var seriesData = data.map((item, index) => {
        return {
          name: item.name,
          value: item.value,

          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                offset: 0,
                color: color.start[index]
              }, {
                offset: 1,
                color: color.end[index]
              }])
            }
          }
        }
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1-1'))
      // 绘制图表
      var option = {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '65%'],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.dataIndex === 0) {
                      return '{color1|' + params.value + '%}' + '\n{black|' + params.name + '}'
                    } else if (params.dataIndex === 1) {
                      return '{color2|' + params.value + '%}' + '\n{black|' + params.name + '}'
                    } else if (params.dataIndex === 2) {
                      return '{color3|' + params.value + '%}' + '\n{black|' + params.name + '}'
                    } else if (params.dataIndex === 3) {
                      return '{color4|' + params.value + '%}' + '\n{black|' + params.name + '}'
                    } else if (params.dataIndex === 4) {
                      return '{color5|' + params.value + '%}' + '\n{black|' + params.name + '}'
                    }
                  },
                  rich: {
                    black: {
                      color: '#666',
                      lineHeight: 20,
                      padding: [5, -30],
                      textAlign: 'left',
                      fontSize: '14px',
                      fontFamily: 'PingFangSC'
                    },
                    color1: {
                      padding: [5, -30],
                      textAlign: 'left',
                      fontWeight: 700,
                      fontFamily: 'PingFangSC',
                      color: '#2EA6FF'
                    },
                    color2: {
                      padding: [5, -30],
                      textAlign: 'left',
                      fontWeight: 700,
                      fontFamily: 'PingFangSC',
                      color: '#9A4CFB'
                    },
                    color3: {
                      padding: [5, -30],
                      textAlign: 'left',
                      fontWeight: 700,
                      fontFamily: 'PingFangSC',
                      color: '#FF6488'
                    },
                    color4: {
                      padding: [5, -30],
                      textAlign: 'left',
                      fontWeight: 700,
                      fontFamily: 'PingFangSC',
                      color: '#00E4FF'
                    },
                    color5: {
                      padding: [5, -30],
                      textAlign: 'left',
                      fontWeight: 700,
                      fontFamily: 'PingFangSC',
                      color: '#53FCB3'
                    }
                  }

                }
              }
            },
            labelLine: {
              length: 20,
              length2: 40
            },
            data: seriesData
          }
        ]
      }
      myChart.setOption(option)
    },
    drawLine2 () {
      var symbols = [
        'path://M115.3,45.3H104c5.7-1.9,9.8-7.2,9.8-13.5c0-7.8-6.4-14.2-14.2-14.2c-7.8,0-14.2,6.4-14.2,14.2c0,6.3,4.1,11.6,9.8,13.5  H83.8c-10,0-18.3,8.1-18.3,18.2v44c0,3.4,2.7,6.2,6.1,6.2c3.4,0,6.2-2.8,6.2-6.2V67.9H81v110.5c0,4.6,3.8,8.3,8.4,8.3  c4.6,0,8.3-3.7,8.3-8.3v-64.1h3.4v64.1c0,4.6,3.7,8.3,8.3,8.3c4.6,0,8.4-3.7,8.4-8.3V67.9h3.2v39.7c0,3.4,2.8,6.2,6.2,6.2  s6.1-2.8,6.1-6.2v-44C133.6,53.5,125.4,45.3,115.3,45.3z',
        'path://M135.6,99.4l-11.4-39.7c-4.6-15.9-17.8-15.4-17.8-15.4h-5.2c5.1-2.2,8.6-7.3,8.6-13.1c0-8-6.5-14.4-14.5-14.4  c-8,0-14.5,6.4-14.5,14.4c0,5.9,3.5,10.9,8.6,13.1h-5.1c0,0-13.3-0.5-17.8,15.4L55,99.4c-1.1,3.7,1,6.5,4.2,7.5  c3.2,0.9,6.5-0.7,7.4-3.7l11.1-38.7h3l-19.2,67h18.1v49.1c0,3.7,3.2,6.9,7.1,6.9c3.5,0,7.1-3.5,7.1-7.2v-48.8h2.9v48.8  c0,3.7,3.6,7.2,7.1,7.2c3.9,0,7.1-3.1,7.1-6.9v-49.1H129l-19.2-67h3l11.1,38.7c0.8,3,4.2,4.6,7.4,3.7  C134.6,105.9,136.6,103.1,135.6,99.4z',
      ]

      var bodyMax = 100

      var labelSetting = {
        normal: {
          show: true,
          position: 'bottom',
          offset: [0, 0],
          formatter: function (param) {
            return (param.value / bodyMax * 100).toFixed(0) + '%'
          },
          textStyle: {
            fontSize: 12,
            fontFamily: 'Arial'
          }
        }
      }

      var markLineSetting = {
        symbol: 'none',
        lineStyle: {
          opacity: 0.3
        }
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1-2'))
      // 绘制图表
      var option = {
        xAxis: {
          data: ['男', '女'],
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          show: false,
          max: bodyMax,
          offset: 20,
          splitLine: { show: false }
        },
        grid: {
          top: '5%',
          left: '15%',
          height: 70,
          width: 70
        },
        // markLine: {
        //     z: -100
        // },
        series: [{
          name: 'typeA',
          type: 'pictorialBar',
          symbolClip: true,
          symbolBoundingData: bodyMax,
          label: labelSetting,
          data: [{
            value: 40,
            symbol: symbols[0],
            itemStyle: {
              color: '#2EA6FF'
            }
          },
          {
            value: 60,
            symbol: symbols[1],
            itemStyle: {
              color: '#FF5959'
            }
          }],
          markLine: markLineSetting,
          z: 10
        },
        {
          name: '总数',
          type: 'pictorialBar',
          symbolBoundingData: bodyMax,
          animationDuration: 0,
          // itemStyle: {
          //   color: 'rgba(255,255,255,0.3)'
          // },
          data: [{
            value: 100,
            symbol: symbols[0],
            itemStyle: {
              color: 'rgba(0,228,255,0.1)'
            }
          }, {
            value: 100,
            symbol: symbols[1],
            itemStyle: {
              color: 'rgba(255,100,136,0.1)'
            }
          }]
        }]
      }
      myChart.setOption(option)
    },
    drawLine3 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      var option = {
        grid: [{
          top: '8%',
          left: '12%',
          // width: '100%',
          height: '95%'
        }],
        backgroundColor: '#fff',
        xAxis: [{
          show: false
        },
        {
          type: 'category',
          boundaryGap: false,
          splitNumber: 6,
          // 坐标轴轴线相关设置。数学上的x轴
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              fontFamily: 'DIN-Medium'
            }
          },
          // 坐标轴刻度标签的相关设置
          axisLabel: {
            textStyle: {
              color: '#ccc',
              fontFamily: 'DIN-Medium'
            }
          },
          axisTick: {
            show: false
          },
          data: [0, 4000, 8000, 120000, 160000, 20000]
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              fontFamily: 'DIN-Medium'
            }
          },
          // offset:'20',
          axisLabel: {
            textStyle: {
              color: '#999',
              fontSize: '12'
            }
          },
          data: this.data2
        }],
        series: [{
          type: 'bar',
          progressiveChunkMode: 'sequential',
          data: this.data3,
          label: {
            normal: {
              show: true,
              position: 'right',
              distance: 10,
              formatter: function (param, value) {
                return param.value
              },
              textStyle: {
                color: '#5B4CCD',
                fontSize: '12',
                fontFamily: 'DIN-Medium'
              }
            }
          },
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: 'rgba(91,76,205,0)'
              }, {
                offset: 1,
                color: 'rgba(91,76,205,0.6)'
              }], false)
            }
          }

        }]
      }
      myChart.setOption(option)
    },
    doClick (index) {
      this.isActive = index
    }
  }
}
</script>

<style lang="less" scoped>
.content-box{
  margin-top: 50/7.5vw;
  li{
    background-color: #fff;
    border-radius: 4/7.5vw;
    padding:40/7.5vw 0;
    margin-bottom: 30/7.5vw;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0 30/7.5vw;
      margin-bottom:80/7.5vw;
      .right-box{
        display: flex;
        align-items: center;
        width: 254/7.5vw;
        height: 56/7.5vw;
        border-radius:28/7.5vw;
        border: 2/7.5vw solid #5B4CCD;
        overflow: hidden;
        span{
          width:50%;
          transform: rotate(20deg);
          height:112/7.5vw;
          line-height: 112/7.5vw;
          text-align: center;
          font-size:28/7.5vw;
          color: #5B4CCD;
          >i{
            display: block;
            transform: rotate(-20deg);
          }
          &.active{
            background-color: #5B4CCD;
            color: #fff;
          }
        }
      }
    }
    .chart-box{
      position: relative;
      height: 500/7.5vw;
      .chart-child1{
        width:100%;
        height:500/7.5vw;
      }
      .chart-child2{
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width: 200/7.5vw;
        height: 200/7.5vw;
      }
    }
  }
}
</style>
